<script setup>
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore } from '@/store/user'
	import { getAuthCode } from '@/api/login'
	
	const user = useUserStore()
	const config = getApp().globalData.config
	const statusHeight = ref(0)
	const menuHeight = ref(32)
	const loginForm = ref({
		username: uni.getStorageSync('login_username') || "",
		password: uni.getStorageSync('login_password') || "",
		code: ""
	})
	const showPassword = ref(true)
	const remember = ref(uni.getStorageSync('login_remember') || [])
	const agree = ref([])
	const loading = ref(false)
	
	function backPage() {
		uni.navigateBack({
			fail: () => {
				uni.switchTab({url: '/pages/tabbar/index'})
			}
		})
	}
	function userLogin(){
		// var reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
		if (loginForm.value.username === "") {
			uni.showToast({
				icon: 'error',
				title: '请输入账号'
			})
		} 
		// else if (!reg.test(loginForm.value.username)) {
		// 	uni.showToast({
		// 		icon: 'error',
		// 		title: '账号不合法'
		// 	})
		// } 
		else if (loginForm.value.password === "") {
			uni.showToast({
				icon: 'error',
				title: '请输入密码'
			})
		} else if (!agree.value.length) {
			uni.showToast({
				icon: 'none',
				title: '请阅读并同意《用户协议》和《隐私政策》'
			})
		} else {
			handleLogin()
		}
	}
	function handleLogin() {
		uni.login({
			provider: 'weixin',
			success: (e) => {
				loginForm.value.code = e.code
				loading.value = true
				user.loginAction({password: loginForm.value}).then(res => {
					user.getInfoAction().then(res => {
						loading.value = false
						uni.navigateBack()
					}).catch(() => loading.value = false)
				}).catch(() => loading.value = false)
			}
		})
	}
	function viewAgreement() {
		uni.navigateTo({
			url: '/pages/user/protocolConsumer'
		})
	}
	function viewPrivacy() {
		uni.navigateTo({
			url: '/pages/user/protocolPrivacy'
		})
	}
	
	onLoad(() => {
		// #ifdef MP-WEIXIN
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		statusHeight.value = menuButtonInfo.top
		menuHeight.value = menuButtonInfo.height + 10
		// #endif
	})
	onUnload(() => {
		if(remember.value.length) {
			uni.setStorageSync('login_username', loginForm.value.username)
			uni.setStorageSync('login_password', loginForm.value.password)
		} else {
			uni.removeStorageSync('login_username')
			uni.removeStorageSync('login_password')
		}
		uni.setStorageSync('login_remember', remember.value)
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head" :style="{height: menuHeight + 'px', top: statusHeight + 'px'}" @click.stop="backPage">
			<view class="head-back">
				<uv-icon name="arrow-left" color="#000000" size="40" bold />
			</view>
			<text class="head-title">登录</text>
		</view>
		<view class="app-content" :style="{paddingTop: menuHeight + 73 + 'px'}">
			<view class="main">
				<image :src="config.appInfo.logo" class="main-icon" mode="aspectFill"></image>
				<text class="main-text">{{config.appInfo.name}}</text>
			</view>
			<view class="login">
				<view class="input-item">
					<input v-model="loginForm.username" class="input" placeholder="请输入账号" maxlength="16" />
				</view>
				<view class="input-item">
					<input v-model="loginForm.password" class="input" :password="showPassword" placeholder="请输入密码" maxlength="16" />
					<uv-icon :name="showPassword? 'eye-off-outline' : 'eye'" color="#000000" size="40" @click="showPassword=!showPassword" />
				</view>
				<uv-checkbox-group v-model="remember" size="30" iconSize="22" labelSize="24" class="remember-item">
					<uv-checkbox name="true" label="记住密码"></uv-checkbox>
				</uv-checkbox-group>
			</view>
			<view class="agree">
				<uv-checkbox-group v-model="agree" placement="column" size="30" iconSize="22">
					<uv-checkbox name="true">
						<view class="agree-text">
							<text>我已阅读并同意</text>
							<text class="text-primary" @click.stop="viewAgreement">《用户协议》</text>
							<text>和</text>
							<text class="text-primary" @click.stop="viewPrivacy">《隐私政策》</text>
						</view>
					</uv-checkbox>
				</uv-checkbox-group>
			</view>
			<uv-button type="primary" shape="circle" size="large" text="登  录" @click="userLogin" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container {
		min-height: 100vh;
		background-image: url('https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-09-08/1757322108809_loginBg.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #FFFFFF;
		color: #000000;
		padding-top: 110rpx;
		.app-head{
			position: fixed;
			left: 0;
			right: 0;
			padding-bottom: 10px;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			.head-back{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 10rpx;
			}
			.head-title{
				font-size: var(--theme-xl);
			}
		}
		.app-content {
			padding-left: 74rpx;
			padding-right: 74rpx;
			.main{
				display: flex;
				flex-direction: column;
				align-items: center;
				font-weight: 600;
				.main-icon{
					width: 176rpx;
					height: 176rpx;
					border-radius: 36rpx;
					background-color: #faf7f7;
				}
				.main-text{
					margin-top: 48rpx;
					font-size: var(--theme-xxl);
				}
			}
			.login{
				margin-top: 96rpx;
				display: flex;
				flex-direction: column;
				gap: 32rpx;
				.input-item {
					height: 96rpx;
					background-color: #F2F2F2;
					border-radius: 48rpx;
					padding: 0 48rpx;
					display: flex;
					align-items: center;
					.input {
						flex: 1;
						font-size: var(--theme-lg);
					}
				}
				.remember-item{
					display: flex;
					justify-content: flex-end;
				}
			}
			.agree{
				margin-top: 32rpx;
				margin-bottom: 32rpx;
				.agree-text{
					font-size: var(--theme-sm);
					line-height: var(--theme-sm-line);
					white-space: pre-wrap;
					.text-primary{
						color: $uv-primary;
					}
				}
			}
			::v-deep .uv-button__text{
				font-weight: 600;
			}
		}
	}
</style>